<script setup lang='ts'>
  import { computed } from 'vue';
  import request from '@/api/index'
  import { nameFilter, ToUserAndRoom, xmtoast, getAssetsFile } from '@/utils/public';
  import theme from '@/utils/theme'
  import xmimg from '@/components/xmimg.vue';
  import integralbox from '@/components/integral.vue';
  const $emit = defineEmits(['updatelist'])
  interface userobj {
    num:number
    room_open:number
    follow:number
    score:number | string
    name:string
    image:string
    user_id:string
    room_id:string
  }
  const props = defineProps({
    list:{
      type:Array,
      default:()=>[]
    }
  })
  const userlist = computed<Array<any>>(()=> {
    const defaultList = [
      { num:1,state:0,room_open:0,follow:0,name:'虚位以待',score:0,image:getAssetsFile('topimg1.png','images')},
      { num:2,state:0,room_open:0,follow:0,name:'虚位以待',score:0,image:getAssetsFile('topimg2.png','images')},
      { num:3,state:0,room_open:0,follow:0,name:'虚位以待',score:0,image:getAssetsFile('topimg3.png','images')},
    ]
    const list = props.list
    const data = defaultList.map((res)=>{
      let obj:userobj = list.find((data:any)=> data.num == res.num) as userobj
      if(typeof(obj) == 'object') {
        return {
          ...obj,
          state:1
        }
      } else {
        return res
      }
    })
    return data
  })
  const handlefollow = async(item:any)=>{
    const { user_id=0, room_id=0, follow=0 } = item
    if(follow) return xmtoast('已关注～')
    let data_type = 0
    let id = 0
    if(user_id) {
      id = user_id
      data_type = 1
    }else if(room_id) {
      id = room_id
      data_type = 2
    }
    if(!data_type && !id) xmtoast('error type id')
    await request.follow({
      data_type,
      follow_id:id
    })
    xmtoast('关注成功～')
    setTimeout(() => {
      $emit('updatelist')
    }, 1000);
  }
</script>

<template>
  <div class="topuser">
    <div class="userlist">
      <div
      v-for="item of userlist"
      :key="item.num"
      :class="['userinfo',`ranking${item.num}`]">
        <div class="userimg" @click="ToUserAndRoom(item)">
          <img :src="item.image" class="portrait">
          <img :src="getAssetsFile(`ranking${item.num}.png`,'images')" class="border">
        </div>
        <div class="tips">
          <img v-if="item.room_open" src="@/assets/images/icon3.png">
        </div>
        <div class="nickName">{{ nameFilter(item.name) }}</div>
        <integralbox class="integralbox" :score="item.score" />
        <div
        v-if="item.state"
        @click="handlefollow(item)"
        :class="['but',item.follow?'selectBut':'']">
          {{item.follow?'已关注':'+关注'}}
        </div>
      </div>
    </div>
    <xmimg :src="theme.rostrumimg" class="rostrumimg" />
  </div>
</template>

<style lang='scss' scoped>
  .topuser {
    position: relative;
    width: 100%;
    padding: 84px 0 0;
    box-sizing: border-box;
    .rostrumimg {
      width: 100%;
      height: 122px;
    }
    .userlist {
      position: absolute;
      top: 0;
      width: 100%;
      height: 104px;
      .userinfo {
        position: absolute;
        .userimg {
          z-index: 1;
          position: relative;
          width: 104px;
          height: 104px;
          .portrait {
            z-index: -1;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 72px;
            height: 72px;
            border-radius: 100%;
          }
          .border {
            width: 100%;
            height: 100%;
          }
        }
        .tips {
          width: 38px;
          height: 12px;
          margin: 0 auto 4px;
        }
        .nickName {
          line-height: 20px;
          font-size: 14px;
          font-weight: 500;
          color: $fontColor;
          text-align: center;
        }
        .integralbox {
          margin: 2px auto 8px;
        }
        .but {
          width: 46px;
          height: 20px;
          line-height: 20px;
          color: $fontColor;
          font-size: 11px;
          font-weight: 500;
          text-align: center;
          border-radius: 100px;
          border: 1px solid #F5DDB5;
          margin: 0 auto;
          background: #422E0D;
        }
        .selectBut {
          color: #422E0D;
          background: #F5DDB5;
        }
      }
      .ranking1 {
        left: 50%;
        transform: translateX(-50%);
      }
      .ranking2 {
        top: 10px;
        left: 10px;
      }
      .ranking3 {
        top: 10px;
        right: 10px;
      }
    }
  }
</style>